<template>
  <van-overlay :show="show" z-index="10">
    <div class="h-full flex flex-col items-center justify-center">
      <div class="relative flex items-center justify-center">
        <img src="https://jwc-static.jdwxk.com/imgs/home/create-user/card.png" class="w-85%" alt="">
        <div class="absolute left-15 top-8">
          <div class="flex flex-col gap-2">
            <SexSelect
              v-for="(item, index) in sexList" :key="index" :active="currentSelectSex === item.value"
              :name="item.name" @click="currentSelectSex = item.value"
            />
          </div>
        </div>
        <div class="absolute left-50% top-15% translate-x--50%">
          <img :src="`${baseUrl}imgs/home/create-user/${currentSelectSex}.png`" class="h-70 w-26" alt="">
        </div>
        <div class="absolute bottom-20 h-10 w-60% border border-#9B2C2B rounded-2.5 border-solid bg-#9A7964">
          <van-field v-model="userName" maxlength="6" placeholder="请输入名称" class="custom-field" input-align="center" />
        </div>
        <div class="absolute bottom-2% left-0 right-0 h-9% flex items-center justify-center text-4 text-#FCDAB1" @click="handleCreateUser">
          创建角色
        </div>
      </div>
      <div
        class="h-12 w-12 flex items-center justify-center border border-white rounded-full border-solid"
        @click="show = !show"
      >
        <div class="i-ep:close-bold text-7 text-white" />
      </div>
    </div>
  </van-overlay>
  <Tickets v-model:show="showTickets" />
</template>

<script lang='ts' setup>
import { ref } from 'vue'
import { showToast } from 'vant'
import SexSelect from './SexSelect/index.vue'
import Tickets from './Tickets/index.vue'
import { useUserStoreWidthOut } from '@/store/modules/user'
import { createUser } from '@/api/system/user'

const show = ref(false)
const currentSelectSex = ref('man')
const userName = ref('')

const showTickets = ref(false)
const baseUrl = import.meta.env.VITE_PUBLIC_PATH
const route = useRoute()
const phone = computed(() => route.query.phone as string)
const userStore = useUserStoreWidthOut()
async function handleCreateUser() {
  // showTickets.value = true
  // show.value = false
  if (!phone.value) {
    showToast({
      message: '未授权！',
      duration: 3000,
    })
    return
  }
  const res = await createUser({
    name: userName.value,
    phone: phone.value,
    pic: '',
    remark: currentSelectSex.value,
  })
  if (res.code === 200) {
    showToast({
      message: '创建用户成功！',
      duration: 3000,
    })
    userStore.GetUserInfo(phone.value)
    showTickets.value = true
    show.value = false
  }
  else {
    showToast({
      message: '创建用户失败！',
      duration: 3000,
    })
  }
}

const sexList = [
  {
    name: '男',
    value: 'man',
  },
  {
    name: '女',
    value: 'women',
  },
]

onMounted(() => {
  show.value = !userStore.getUserInfo.name
})
</script>

<style lang='less'>
.custom-field {
  padding: 0;
  height: 100%;
  background: transparent;
  .van-field__body {
    height: 100%;
  }
  .van-field__control {
    color: white;
    font-size: 16px;
  }
}
</style>
